<template>
	<view class="rich-text" @tap="handleTap">
		<rich-text ref="rich" :nodes="richText"></rich-text>
	</view>
	<!-- <wxParse :content="richText" :imageProp="{mode:'widthFix'}" @preview="preview"/> -->
</template>

<script>
	export default {
		props: {
			richText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				imageUrls: []
			}
		},
		mounted() {
			// 提取富文本中的图片 URL
			let regex = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
			let match;
			while ((match = regex.exec(this.richText)) !== null) {
				this.imageUrls.push(match[1]);
			}
			console.log(this.imageUrls)
		},
		methods: {
			preview(src) {
				console.log(src)
			},
			handleTap(e) {
				console.log(111111,e)
				const query = uni.createSelectorQuery().in(this);
				query.selectViewport().scrollOffset().exec((scroll) => {
					query.selectAll('img').fields({
						dataset: true,
						rect: true
					}, (res) => {
				console.log(2222,res)
						let [touch] = e.touches;
						let targetImg;
						res.forEach((img) => {
							if (touch.clientX >= img.left && touch.clientX <= img.right &&
								touch.clientY + scroll[0].scrollTop >= img.top && touch
								.clientY + scroll[0].scrollTop <= img.bottom) {
								targetImg = img.dataset.src;
							}
						});
						if (targetImg) {
							uni.previewImage({
								urls: this.imageUrls,
								current: targetImg
							});
						}
					}).exec();
				});
			}
		}
	}
</script>

<style>
</style>